<template>
  <div style="position: relative;top: -28px;">
    <el-row>
      <el-tabs v-model="name" @tab-click="handleClick">
        <el-tab-pane label="脱贫攻坚数据图" name="first" :lazy="true">
            <el-form :model="form" :rules="dataRule" ref="form" class="btn-ss" @keyup.enter.native="dataFormSubmit()">
              <el-form-item>
                <el-select v-model="form.value" placeholder="请选择年份" >
                  <el-option
                      v-for="item in form.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
             <div class="btn-text">
               <el-form-item prop="input">
                 <el-input  v-model="form.input" placeholder="请输入姓名" ></el-input>
               </el-form-item>
               <el-form-item >
                 <el-button style="margin-left: 10px"  @click="dataFormSubmit()">搜索</el-button>
               </el-form-item>
             </div>
            </el-form>
          <div class="chart" style="height: 65vh"></div>
        </el-tab-pane>
        <el-tab-pane label="乡村振兴数据图" name="second" :lazy="true">
          <el-form :model="form" :rules="dataRule" ref="form" class="btn-ss" @keyup.enter.native="dataFormSubmit()">
            <el-form-item>
              <el-select v-model="form.value" placeholder="请选择年份" >
                <el-option
                    v-for="item in form.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div class="btn-text">
              <el-form-item prop="input">
                <el-input  v-model="form.input" placeholder="请输入姓名" ></el-input>
              </el-form-item>
              <el-form-item >
                <el-button style="margin-left: 10px"  @click="dataFormSubmitTwo()">搜索</el-button>
              </el-form-item>
            </div>
          </el-form>
          <div class="chartTwo" style="height: 70vh"></div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {pevInformation , revInformation} from "@/utils/data"
export default {
  name: "MyMonitor",
  data() {
    return {
      form:{
        options: [
          {
            value: "2024",
            label: "2024",
          },
          {
            value: "2023",
            label: "2023",
          },
          {
            value: "2022",
            label: "2022",
          },
          {
            value: "2021",
            label: "2021",
          },
          {
            value: "2020",
            label: "2020",
          },
          {
            value: "2019",
            label: "2019",
          },
        ],
        value: "2024",
        input: "陈书帆",
      },
      dataRule:{
        input: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
      },
      name:'first'
    };
  },
  mounted() {
    this.getEchartsOne()
    // this.getEchartsTwo()
    this.dataFormSubmit()
  },
  methods: {
    dataFormSubmit(){
      pevInformation({
        "name":this.form.input,
        "year":this.form.value
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    dataFormSubmitTwo(){
      revInformation({
        "name":this.form.input,
        "year":this.form.value
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    getEchartsOne() {
      const chartDom = document.querySelector(".chart");
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '脱贫攻坚'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['金额', '健康', '就业率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: 'value',
          name: '单位/%',
        },
        series: [
          {
            name: '金额',
            type: 'line',
            data: [10, 20, 22, 35, 63, 69, 75, 80, 86, 90, 91, 96]
          },
          {
            name: '健康',
            type: 'line',
            data: [5, 11, 19, 23, 39, 56, 61, 71, 79, 85, 89, 93]
          },
          {
            name: '就业率',
            type: 'line',
            data: [15, 23, 25, 31, 39, 43, 51, 59, 63, 70, 81, 89]
          },
        ]
      };

      myChart.setOption(option);
    },
    getEchartsTwo() {
      const chartDom = document.querySelector(".chartTwo");
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '脱贫攻坚'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['每季度收入', '生态宜居', '乡村文明', '治理有效', '生活富裕']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            "春季",
            "夏季",
            "秋季",
            "冬季",
          ],
        },
        yAxis: {
          type: 'value',
          name: '单位/%',
        },
        series: [
          {
            name: '每季度收入',
            type: 'line',
            data: [10, 20, 22, 35, 63, 69, 75, 80, 86, 90, 91, 96]
          },
          {
            name: '生态宜居',
            type: 'line',
            data: [5, 11, 19, 23, 39, 56, 61, 71, 79, 85, 89, 93]
          },
          {
            name: '乡村文明',
            type: 'line',
            data: [15, 23, 25, 31, 39, 43, 51, 59, 63, 70, 81, 89]
          },
          {
            name: '治理有效',
            type: 'line',
            data: [15, 23, 25, 31, 39, 43, 51, 59, 63, 70, 81, 89]
          },{
            name: '生活富裕',
            type: 'line',
            data: [15, 23, 25, 31, 39, 43, 51, 59, 63, 70, 81, 89]
          },

        ]
      };

      myChart.setOption(option);
    },
    handleClick() {
      this.$nextTick(()=>{
        if(this.name==='first'){
          this.dataFormSubmit()
          this.getEchartsOne();   //绘制第一个tab的图表
        }else if(this.name==='second'){
          this.dataFormSubmitTwo()
          this.getEchartsTwo();   //绘制第二个tab的图表
        }
      })
    },
  },
};
</script>

<style scoped>
.btn-ss,
.btn-text {
  display: flex;
  justify-content: space-between; /* 水平均分 */
  align-items: center; /* 垂直居中 */
}
</style>
